<!DOCTYPE html>
<html lang="en">
<head>
<title>深度学习服务管理平台</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="../static/css/uniform.css" />
<link rel="stylesheet" href="../static/css/select2.css" />
<link rel="stylesheet" href="../static/css/matrix-style.css" />
<link rel="stylesheet" href="../static/css/matrix-media.css" />
<link href="../static/font-awesome/css/font-awesome.css" rel="stylesheet" />

</head>
<body>

<!--Header-part-->
<div id="header">
  <h1><a href="">Gpu Server</a></h1>
</div>
<!--close-Header-part--> 


<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
  <ul class="nav">
    <li  class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon icon-user"></i>  <span class="text">欢迎您 演示账号</span><b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-user"></i> 我的日志</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="icon-check"></i> 我的账号</a></li>
        <li class="divider"></li>
        <li><a href="../login"><i class="icon-key"></i> 退出</a></li>
      </ul>
    </li>
    <li class="dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope"></i> <span class="text">消息</span> <span class="label label-important">0</span> <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a class="sAdd" title="" href="#"><i class="icon-plus"></i> 新消息</a></li>
        <li><a class="sTrash" title="" href="#"><i class="icon-trash"></i> 删除消息</a></li>
      </ul>
    </li>
    <li class=""><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">设置</span></a></li>
    <li class=""><a title="" href="../logout"><i class="icon icon-share-alt"></i> <span class="text">退出登陆</span></a></li>
  </ul>
</div>

<!--start-top-serch-->
<div id="search">
  <input type="text" placeholder="Search here..."/>
  <button type="submit" class="tip-bottom" title="Search"><i class="icon-search icon-white"></i></button>
</div>
<!--close-top-serch--> 

<!--sidebar-menu-->

<div id="sidebar"> <a href="#" class="visible-phone"><i class="icon icon-th"></i>Tables</a>
  <ul>
    <li class="submenu"> <a href=""><i class="icon icon-th-list"></i> <span>任务管理</span> <span class="label label-important">4</span></a>
      <ul>
        <li><a href="taskdemo">图片识别demo</a></li>
        <li><a href="taskvideodemo">视频识别demo</a></li>
        <li><a href="idletaskdemo">闲置宅基地识别demo</a></li>
        <li><a href="taskchangedetecdemo">地表变化检测demo</a></li>
        <li><a href="tasklist">当前任务</a></li>
      </ul>
    </li>

    <li class="submenu"> <a href=""><i class="icon icon-info-sign"></i> <span>系统管理</span> <span class="label label-important">1</span></a>
      <ul>
        <li><a href="appedtionlist">app版本下载</a></li>
      </ul>
    </li>

    <li class="content"> <span>GPU利用率</span>
      <div class="progress progress-mini progress-danger active progress-striped">
        <div style="width: 77%;" class="bar"></div>
      </div>
      <span class="percent">78%</span>
      <div class="stat">18720MB/24000MB</div>
    </li>
    <li class="content"> <span>磁盘空间利用率</span>
      <div class="progress progress-mini active progress-striped">
        <div style="width: 87%;" class="bar"></div>
      </div>
      <span class="percent">65%</span>
      <div class="stat">4160GB/ 6500GB</div>
    </li>
  </ul>
</div>
<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">任务管理</a> </div>
    <h1>深度学习任务实时调度----闲置宅基地识别</h1>
  </div>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">

        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>闲置宅基地识别测试任务演示</h5>
          </div>
          <div class="widget-content nopadding">
            <table class="table"   >
              <tr>
                <td colspan="2">测试数据:
                  测试图片1<img  src="../static/img/idle1.jpg" style="width: 100px;height: 80px" ><a href="../static/img/idle1.jpg" >下载</a> &nbsp;&nbsp;
                  测试图片2 <img  src="../static/img/idle2.jpg" style="width: 100px;height: 80px" ><a href="../static/img/idle2.jpg" >下载</a> &nbsp;&nbsp;
                  测试图片3 <img  src="../static/img/idle3.jpg" style="width: 100px;height: 80px" ><a href="../static/img/idle3.jpg" >下载</a>
              </td>
              </tr>

              <tr>
                <td>

                  <input type="hidden"  id="taskname"  name="taskname"  value ="闲置宅基地" >
                  <h3>原始宅基地图像</h3>
                </td>
                <td>
                  <h3>返回数据</h3></td>
              </tr>


              <tr>
                <td><img id="id_img" src="../static/img/idle2.jpg" style="width: 400px;height: 300px" ></td>

                <td>
                  识别结果:<br> <input type="text" id="msg2"  readonly="value" style="width:300px" /><br>
                  返回原始数据:<br> <textarea readonly="value"  style="width: 300px; height: 160px" id="msg3" ></textarea>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="file" value="input" id="id_myfile"  accept="image/jpeg"  > </td><td><input type="button" value="执行闲置宅基地识别" onclick="file_img()"  />
              </td>
              </tr>
              <tr>
                  <td>任务状态：<input type="text" id="msg"  readonly="value"  />
                </td>
                  <td>
                  </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Footer-part-->
<div class="row-fluid">
  <div id="footer" class="span12"> 2019 &copy; Deeep Learning  <a href="" target="_blank" title="">西南交通大学中国土地信息大数据研究院</a>   </div>
</div>
<!--end-Footer-part-->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/jquery.ui.custom.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.uniform.js"></script>
<script src="../static/js/select2.min.js"></script>
<script src="../static/js/jquery.dataTables.min.js"></script>
<script src="../static/js/matrix.js"></script>



<script type="text/javascript">

  $('#id_myfile').change(function () {
    // 先获取用户上传的文件对象
    let fileObj = this.files[0];
    // 生成一个文件读取的内置对象
    let fileReader = new FileReader();
    // 将文件对象传递给内置对象
    fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作
    // 将读取出文件对象替换到img标签
    fileReader.onload = function(){  // 等待文件阅读器读取完毕再渲染图片
      $('#id_img').attr('src',fileReader.result)
    }
  });
</script>

<script>

  var message="";
  var filename="";

   interval = setInterval(checkresult,300);

  function file_img() {
    if($("#id_myfile")[0].files[0] == null || $("#id_myfile")[0].files[0] == ""){
      alert("请选择上传文件");
      return;
    }
    var formData = new FormData();
    formData.append("file", $("#id_myfile")[0].files[0]);
    formData.append("tasktype", "1");
    formData.append("taskname", $("#taskname").val());
    formData.append("key", "111111");
    formData.append("license", "123456");
    $("#msg").val("数据上传中，请稍后...");

    $.ajax({
      type: "post",
      url: '../file/upload',
      data: formData,
      processData: false,
      contentType: false,
      success: function (data) {
        $("#msg").val(data.message);
        taskstatus=1;
        filename=data.data;
      }
    });
  }
  function checkresult() {
    if (filename == "") {
      return;
    }
      var formData = new FormData();
      formData.append("userimage", filename);
      formData.append("tasktype", "1");
      formData.append("taskname", $("#taskname").val());
      formData.append("key", "111111");
      formData.append("license", "123456");
      $.ajax({
          type: "post",
          url: '../file/getmessage',
          data: formData,
          processData: false,
          contentType: false,
          success: function (data) {
              if (data.data.taskstatus ==4) {
                filename="";

                var t= data.data.outmessage;
                var jsondata= JSON.parse(t);
                var label=jsondata.target['label'];
                var score=jsondata.target['score'];
                var text="宅基地状态："+label+" ,识别率:"+score;
                $("#msg2").val(text);
                $("#msg3").val(JSON.stringify(data));
              }
              $("#msg").val(data.message);

          }
      });
  }

</script>

</body>
</html>
